<template>
  <!-- Workload 工作量列表 -->
  <div>
    <el-container>
      <!-- 表头的布局 -->
      <el-header
        >人员搜索:
        <el-input v-model.trim="inputww1" placeholder="请输入内容"></el-input>
        角色:
        <el-input v-model.trim="inputww2" placeholder="请输入内容"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="ssFn">搜索</el-button>
      </el-header>
      <!-- 底部表单的布局 -->
      <el-main>
        <div class="ry-butt">
          <!-- 表单 -->
          <div class="ry-form">
            <!-- 表单渲染 -->
            <el-table
              class="yan"
              :data="getlist.currentPageRecords"
              stripe
              :header-cell-style="{ backgroundColor: '#f3f6fb' }"
              style="width: 100%"
            >
              <el-table-column
                type="index"
                :index="indexMethod"
                label="序号"
                width="100"
              >
              </el-table-column>
              <el-table-column prop="userName" label="人员名称" width="220">
              </el-table-column>
              <el-table-column prop="roleName" label="角色" width="220">
              </el-table-column>
              <el-table-column prop="mobile" label="联系电话" width="220">
              </el-table-column>
              <el-table-column
                prop="workCount"
                label="完成工单(本月)"
                width="220"
              >
              </el-table-column>
              <el-table-column
                prop="progressTotal"
                label="进行中工单"
                width="220"
              >
              </el-table-column>
              <el-table-column
                prop="cancelCount"
                label="拒绝工单(本月)"
                width="220"
              >
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="text" @click="alter(scope.row)"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <PlugIn
              :overa="getlist.totalCount"
              :present="page.pageIndex"
              :overall="getlist.totalPage"
              @addFn="addFn"
            />
          </div>
        </div>
      </el-main>
    </el-container>
    <Dialog :visible.sync="modelbox" ref="workForm"/>
  </div>
</template>

<script>
import PlugIn from '../plug-in/index.vue'
import { postsearchUserWorksku } from '@/api/personnel'
import Dialog from '../plug-in/dialog.vue'
export default {
  name: 'aa-a',
  components: { PlugIn, Dialog },
  data () {
    return {
      page: {
        pageIndex: '1', // 页
        pageSize: '10' // 每页渲染条数
      },
      getlist: {
        currentPageRecords: [],
        totalCount: '', // 总条数
        totalPage: '' // 页数
      }, // 返回的数据
      inputww1: '', // 搜索框的数据
      inputww2: '', // 搜索框的数据
      modelbox: false, // 切换模态框
      omitlist: {} // 储存编辑项
    }
  },
  created () {
    this.getrole()
  },
  methods: {
    indexMethod (index) {
      // 计算出每页的序号
      return index + 1 + (this.page.pageSize * this.page.pageIndex - 10)
    },
    async getrole () {
      // 实现页面渲染
      const arr = await postsearchUserWorksku(this.page)
      this.page.pageIndex = arr.pageIndex
      this.page.pageSize = arr.pageSize
      this.getlist = arr
    },
    alter (row) {
      // 查看详情
      this.modelbox = true // 打开模态框
      // this.$refs.workForm.workLi.userId = row.userId //赋值id
      // console.log(this.$refs.workForm.workLi.userId);
      this.$refs.workForm.getlist = row // 赋值表单数据
    },
    addFn (sum) {
      // 切换器
      // 实现切换页面
      const arr = this.page.pageIndex * 1 + sum + ''
      if (arr > 0 && arr <= this.getlist.totalPage) {
        this.page.pageIndex = arr
        this.getrole() // 重新渲染数据
      }
    },
    ssFn () {
    //  实现搜索
    // 细节处理升级: 0.1 获取全部的数据，再进行搜索验证。 0.2 页数需要进行联动
      if (this.inputww2 !== '' || this.inputww1 !== '') {
        if (this.inputww2) {
          this.getlist.totalCount = this.getlist.currentPageRecords.filter(item => item.roleName === this.inputww2).length + ''
          this.getlist.currentPageRecords = this.getlist.currentPageRecords.filter(item => item.roleName === this.inputww2)
        } else if (this.inputww1) {
          this.getlist.totalCount = this.getlist.currentPageRecords.filter(item => item.roleName === this.inputww2).length + ''
          this.getlist.currentPageRecords = this.getlist.currentPageRecords.filter(item => item.userName === this.inputww1)
        }
        this.getlist.totalCount = this.getlist.currentPageRecords.filter(item => item.roleName === this.inputww2).length + ''
        const aww = this.getlist.currentPageRecords.filter(item => item.roleName === this.inputww2)
        this.getlist.currentPageRecords = aww.filter(item => item.userName === this.inputww1)
      } else {
        this.getrole()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
//  实现表头的scss布局
.el-header {
  height: 64px;
  margin-bottom: 30px;
  background-color: #fff;
  color: rgb(96, 98, 102);
  line-height: 60px;
  .el-input {
    width: 200px;
    height: 36px;
    margin-right: 15px;
    margin-left: 20px;
    .el-input__inner {
      width: 100%;
      height: 36px;
    }
  }
  .el-button {
    font-size: 16px;
    .el-icon-search:before {
      font-size: 16px;
    }
  }
}
//  实现底部表单的scss布局
.el-main {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: #333;
  line-height: 30px;
  // button的样式
  .item.el-button {
    font-size: 16px;
    margin-left: 20px;
  }
  .item.el-button--primary {
    background-color: #ff9743;
    border-color: #fff;
  }
  .ry-butt {
    display: flex;
    flex-direction: column;
    .ry-onm {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .ry-form {
      margin-left: 20px;
      width: 100%;
      .yan {
        font-size: 16px;
      }
    }
  }
}
</style>
